<template>
    <view class="container">
        <!-- 主要内容区域 -->
        <view class="content">
            <!-- 总学分卡片 -->
            <view class="score-card">
                <text class="score-label">总学分</text>
                <text class="score-value">{{ totalScore }}</text>
            </view>

            <!-- 标签页 -->
            <view class="tabs">
                <view 
                    class="tab-item" 
                    :class="{ active: activeTab === 'online' }"
                    @click="switchTab('online')"
                >
                    <text class="tab-text">线上学习</text>
                </view>
                <view 
                    class="tab-item" 
                    :class="{ active: activeTab === 'offline' }"
                    @click="switchTab('offline')"
                >
                    <text class="tab-text">线下学习</text>
                </view>
            </view>

            <!-- 课程列表 -->
            <view class="course-list">
                <view 
                    class="course-item" 
                    v-for="course in currentCourseList" 
                    :key="course.id"
                    @click="handleCourseClick(course)"
                >
                    <view class="course-header">
                        <text class="course-title">{{ course.title }}</text>
                        <text class="course-date">{{ course.date }}</text>
                    </view>
                    <view class="course-details">
                        <view class="course-info">
                            <text class="course-score">获得学分: {{ course.score }}</text>
                            <text v-if="course.location" class="course-location">地点: {{ course.location }}</text>
                        </view>
                        <text class="course-status" :class="{ failed: course.status === '不合格' }">{{ course.status }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 当前激活的标签页
const activeTab = ref('online')

// 总学分
const totalScore = ref(128)

// 线上学习课程列表
const onlineCourses = ref([
    {
        id: 1,
        title: '新员工入职培训课程',
        date: '2023-12-20',
        score: 10,
        status: '合格'
    },
    {
        id: 2,
        title: '产品设计思维与方法论',
        date: '2023-12-18',
        score: 15,
        status: '不合格'
    },
    {
        id: 3,
        title: '项目管理实战技巧',
        date: '2023-12-15',
        score: 20,
        status: '合格'
    },
    {
        id: 4,
        title: '团队协作与沟通技巧',
        date: '2023-12-10',
        score: 12,
        status: '不合格'
    },
    {
        id: 5,
        title: '数据分析基础',
        date: '2023-12-05',
        score: 18,
        status: '合格'
    }
])

// 线下学习课程列表
const offlineCourses = ref([
    {
        id: 6,
        title: '企业文化培训',
        date: '2023-11-25',
        location: '公司大会议室',
        score: 8,
        status: '合格'
    },
    {
        id: 7,
        title: '安全知识讲座',
        date: '2023-11-20',
        location: '培训中心A厅',
        score: 5,
        status: '不合格'
    },
    {
        id: 8,
        title: '团队建设活动',
        date: '2023-11-15',
        location: '户外拓展基地',
        score: 6,
        status: '合格'
    }
])

// 根据当前标签页显示对应的课程列表
const currentCourseList = computed(() => {
    return activeTab.value === 'online' ? onlineCourses.value : offlineCourses.value
})

// 切换标签页
function switchTab(tab) {
    activeTab.value = tab
}

// 返回上一页
function goBack() {
    uni.navigateBack()
}

// 处理课程点击
function handleCourseClick(course) {
    uni.showToast({
        title: `查看课程：${course.title}`,
        icon: 'none'
    })
    // 这里可以添加跳转到课程详情的逻辑
}
</script>

<style>
.container {
    height: 100vh;
    background-color: #f5f5f5;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.content {
    padding: 0 20rpx;
    padding-bottom: 40rpx;
    flex: 1;
    overflow-y: auto;
}

.score-card {
    background: linear-gradient(135deg, #4095E5, #0e375e);
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin-bottom: 30rpx;
    position: relative;
    overflow: hidden;
}

.score-label {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10rpx;
}

.score-value {
    display: block;
    font-size: 72rpx;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.tabs {
    display: flex;
    background: #fff;
    border-radius: 12rpx;
    padding: 8rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tab-item {
    flex: 1;
    padding: 20rpx 0;
    text-align: center;
    border-radius: 8rpx;
    transition: all 0.3s ease;
}

.tab-item.active {
    background: #4095E5;
}

.tab-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
}

.tab-item.active .tab-text {
    color: #fff;
}

.course-list {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.course-item {
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.3s ease;
}

.course-item:last-child {
    border-bottom: none;
}

.course-item:active {
    background-color: #f8f9fa;
}

.course-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
}

.course-title {
    flex: 1;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-right: 20rpx;
}

.course-date {
    font-size: 24rpx;
    color: #999;
    flex-shrink: 0;
}

.course-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.course-info {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.course-score {
    font-size: 26rpx;
    color: #666;
}

.course-location {
    font-size: 24rpx;
    color: #999;
}

.course-status {
    font-size: 26rpx;
    color: #4CAF50;
    font-weight: 500;
}

.course-status.failed {
    color: #f44336;
}
</style> 